<template>
  <div>
    <Modal
      :title="`${previewMode ? '预览' : itemId ? '编辑' : '新建'}问卷`"
      :value="value"
      :mask-closable="false"
      @on-visible-change="visibleChange"
    >
      <div class="title-dec">
        <span style="margin-right: 15px">问卷名称</span>
        <span>{{ editItem.paperName }}</span>
      </div>

      <Form
        :class="{ 'v-hide': previewMode }"
        ref="createForm"
        label-position="right"
        :label-width="100"
        :rules="formRule"
        :model="editItem"
      >
        <FormItem :label="'问卷名称'" prop="paperName">
          <Input v-model="editItem.paperName" :maxlength="32"></Input>
        </FormItem>
        <FormItem :label="'评价指标'" prop="paperZhibiao">
          <CheckboxGroup v-model="editItem.paperZhibiao">
            <Checkbox
              v-for="(it, i) in paperZhibiaoOpts"
              :key="i"
              :label="it.value"
              >{{ it.label }}</Checkbox
            >
          </CheckboxGroup>
        </FormItem>
        <FormItem :label="'题目生成方式'" prop="paperType">
          <Select v-model="editItem.paperType" style="width: 180px">
            <Option
              v-for="(item, i) in paperTypeOpts"
              :key="i"
              :value="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </FormItem>
        <FormItem :label="'选项显示内容'" prop="paperXuanxiang">
          <CheckboxGroup v-model="editItem.paperXuanxiang">
            <Checkbox
              v-for="(it, i) in paperXuanXiangOpts"
              :key="i"
              :label="it.value"
              >{{ it.label }}</Checkbox
            >
          </CheckboxGroup>
        </FormItem>
        <div>
          <div style="width: 100px; text-align: right">
            <Button :loading="saving" @click="onGenerate" type="primary"
              >生成问卷</Button
            >
          </div>
        </div>
      </Form>

      <div v-show="editItem.isGenerated" style="margin-top: 10px">
        <Form
          ref="createForm1"
          class="create-form1"
          label-position="right"
          :label-width="50"
          :rules="formRule1"
          :model="flattendPaperQuestions"
        >
          <div v-for="(group, i) in groupedPaperQuestions" :key="i">
            <div class="title-dec">{{ group.zhibiaoTitle }}</div>
            <div :class="{ 'v-hide': previewMode }">
              <div v-for="(question, j) in group.children" :key="j">
                <FormItem :label="`${j + 1}.`" :prop="`${question._inx}_title`">
                  <Input
                    v-model="flattendPaperQuestions[`${question._inx}_title`]"
                    @on-change="onPaperFormChange(question._inx, 'title')"
                    placeholder="请输入题目"
                  ></Input>
                </FormItem>
                <FormItem
                  v-for="(opt, k) in question.questionOpts"
                  :key="k"
                  :prop="`${question._inx}_${opt._inx}_label`"
                >
                  <template slot="label">
                    <div class="question-opt-dec"></div>
                  </template>
                  <Input
                    :disabled="!isCustomizationEnabled"
                    v-model="
                      flattendPaperQuestions[
                        `${question._inx}_${opt._inx}_label`
                      ]
                    "
                    @on-change="
                      onPaperOptionFormChange(question._inx, opt._inx, 'label')
                    "
                    class="question-option"
                    style="width: 180px"
                    placeholder="请输入选项"
                  ></Input>
                  <div
                    style="
                      display: inline-flex;
                      align-items: center;
                      margin-left: auto;
                      margin-right: 30px;
                    "
                  >
                    <Upload
                      accept=".png,.jpg"
                      action=""
                      :before-upload="funUploadPicture(question._inx, opt._inx)"
                      :show-upload-list="false"
                    >
                      <a
                        href="javascript:;"
                        style="color: #2d8cf0; padding: 3px; margin-left: 15px"
                        >上传图片</a
                      >
                    </Upload>
                    <div
                      v-if="
                        flattendPaperQuestions[
                          `${question._inx}_${opt._inx}_picurl`
                        ]
                      "
                      style="
                        margin-left: 10px;
                        position: relative;
                        width: 140px;
                        height: 100px;
                      "
                    >
                      <a
                        href="javascript:;"
                        @click="onRemovePicture(question._inx, opt._inx)"
                        style="
                          padding: 5px;
                          position: absolute;
                          right: 0;
                          top: 0;
                          background: #f44336;
                          width: 20px;
                          height: 20px;
                          display: flex;
                          justify-content: center;
                          align-items: center;
                        "
                      >
                        <Icon type="ios-close" color="#fff" size="18" />
                      </a>
                      <img
                        alt=""
                        :src="
                          flattendPaperQuestions[
                            `${question._inx}_${opt._inx}_picurl`
                          ]
                        "
                        style="width: 100%; height: 100px"
                      />
                    </div>
                  </div>
                </FormItem>
                <div
                  style="
                    padding: 5px;
                    text-align: center;
                    margin: 0 0 25px 20px;
                    background: #e3f2fd;
                  "
                >
                  <a
                    href="javascript:;"
                    style="color: #2d8cf0; padding: 3px; margin-right: 15px"
                    @click="onInsertQuestion(question._inx)"
                    >在此题后插入新题</a
                  >
                  <a
                    v-if="group.children.length > 1"
                    href="javascript:;"
                    style="color: #f44336; padding: 3px"
                    @click="onDeleteQuestion(question._inx)"
                    >删除</a
                  >
                </div>
              </div>
            </div>

            <div v-show="previewMode">
              <div v-for="(question, j) in group.children" :key="j">
                <div style="margin: 10px 0 5px 20px">
                  <span>{{ `${j + 1}.` }}</span>
                  <span>{{
                    flattendPaperQuestions[`${question._inx}_title`]
                  }}</span>
                </div>
                <div
                  v-for="(opt, k) in question.questionOpts"
                  :key="k"
                  style="display: flex; align-items: center; margin: 5px 0"
                >
                  <span
                    class="question-opt-dec"
                    style="margin-right: 10px"
                  ></span>
                  <span style="margin-right: 10px">{{
                    flattendPaperQuestions[`${question._inx}_${opt._inx}_label`]
                  }}</span>
                  <div
                    style="
                      display: inline-flex;
                      align-items: center;
                      margin-left: auto;
                      margin-right: 30px;
                    "
                  >
                    <div
                      v-if="
                        flattendPaperQuestions[
                          `${question._inx}_${opt._inx}_picurl`
                        ]
                      "
                      style="
                        margin-left: 10px;
                        position: relative;
                        width: 140px;
                        height: 100px;
                      "
                    >
                      <img
                        alt=""
                        :src="
                          flattendPaperQuestions[
                            `${question._inx}_${opt._inx}_picurl`
                          ]
                        "
                        style="width: 100%; height: 100px"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </Form>
      </div>

      <div slot="footer">
        <Button @click="cancel">{{ L("Cancel") }}</Button>
        <Button
          v-show="!previewMode"
          :disabled="!editItem.isGenerated"
          :loading="saving"
          @click="saveItem"
          type="primary"
          >保存</Button
        >
        <Button
          v-show="!preview"
          :disabled="!editItem.isGenerated"
          @click="togglePreview"
          type="primary"
          >{{ previewMode ? "回到编辑" : "预览" }}</Button
        >
      </div>
    </Modal>
  </div>
</template>
<script lang="ts">
import { Component, Mixins, Prop } from "vue-property-decorator";
import CreateMixin from "@/mixins/CreateMixin";
import GetAdminUserMixin from "@/mixins/GetAdminUserMixin";
import ajax from "@/lib/ajax";
import { random } from "lodash";
import AppConsts from "@/lib/appconst";

const { remoteServiceBaseUrl } = AppConsts;
const ROOT_GUID = "00000000-0000-0000-0000-000000000000";

export class ClassItem {
  id = "";
  paperName = ""; // 问卷名称
  paperType = ""; // 题目生成方式
  paperZhibiao = []; // 评价指标
  paperXuanxiang = []; // 选项显示内容

  isGenerated = false; // 已生成

  paperQuestions: ClassPaperQuestion[] = [];
}

export class ClassPaperQuestion {
  title = "";
  questionOpts: ClassPaperQuestionOpt[] = [];
  zhibiaoId = "";
  zhibiaoTitle = "";

  _inx = -1;
  _prevInx = -1;
  _filtered = false;
}

export class ClassPaperQuestionOpt {
  value = "00000000-0000-0000-0000-000000000000";
  label = "";
  picUrl = "";

  _inx = -1;
}

@Component({
  components: {},
})
export default class CreateComp extends Mixins(CreateMixin, GetAdminUserMixin) {
  @Prop({
    type: String,
    required: true,
  })
  itemId: string;

  @Prop({
    type: Boolean,
  })
  preview: boolean = false;

  innerPreview = false;

  get previewMode() {
    return this.preview || this.innerPreview;
  }

  editItem: ClassItem = new ClassItem();

  get groupedPaperQuestions() {
    let groups = [];
    this.editItem.paperQuestions
      .filter((x) => !x._filtered)
      .forEach((it, i) => {
        let group = groups.find((x) => x.zhibiaoId == it.zhibiaoId);
        if (!group) {
          group = {
            zhibiaoId: it.zhibiaoId,
            zhibiaoTitle: it.zhibiaoTitle,
            children: [],
          };
          groups.push(group);
        }
        if (it._prevInx > -1) {
          const inx = group.children.findIndex((x) => x._inx == it._prevInx);
          group.children.splice(inx + 1, 0, it);
        } else {
          group.children.push(it);
        }
      });
    return groups;
  }

  paperTypeOpts = [
    { label: "根据评价细则生成", value: "4" },
    { label: "自定义", value: "5" },
  ];
  paperZhibiaoOpts = [];
  paperXuanXiangOpts = [
    { label: "等级，比如A", value: "1" },
    { label: "等级定义，比如优秀", value: "2" },
    { label: "自定义", value: "3" },
  ];

  // DONE
  async createdInitAdmin() {
  }

  // DONE
  async saveItem() {
    const createForm1 = this.$refs.createForm1;

    if (!!createForm1) {
      (createForm1 as any).validate(async (valid: boolean) => {
        if (valid) {
        }
      });
    }
  }

  onGenerate() {
    const createForm = this.$refs.createForm;

    if (!!createForm) {
      (createForm as any).validate(async (valid: boolean) => {
        if (valid) {
          console.log("---", this.editItem);

          await ajax
            .post("/api/services/app/QuestionNaireLibrary/Generate", {
              questionGeneratType: this.editItem.paperType,
              selectShowContentType: this.editItem.paperXuanxiang,
              quotaTypeId: this.editItem.paperZhibiao,
            })
            .then((resp) => {
              if ("success" == "success") {
                const paperQuestions = resp.data.result.map((item) => {
                  let paperQuestion = new ClassPaperQuestion();
                  const randomZhibiao =
                    this.paperZhibiaoOpts[Math.floor(Math.random() * 5)];
                  paperQuestion.title = item.topicContent;
                  paperQuestion.zhibiaoId = item.quotaTypeId;
                  paperQuestion.zhibiaoTitle = item.qutaName;
                  paperQuestion.questionOpts = item.option.map((j) => {
                    let questionOpt = new ClassPaperQuestionOpt();
                    questionOpt.value = j.optionContent;
                    questionOpt.label = j.optionContent;
                    questionOpt.picUrl = "/img/badges/zhuang3.png";
                    return questionOpt;
                  });

                  return paperQuestion;
                });

                /** mark question._inx & option._inx */
                paperQuestions.forEach((it, i) => {
                  it._inx = i;
                  it._prevInx = -1;
                  it.questionOpts.forEach((opt, j) => {
                    opt._inx = j;
                  });
                });
                this.$set(this.editItem, "paperQuestions", paperQuestions);

                let flattendPaperQuestions = {};
                paperQuestions.forEach((ques, i) => {
                  flattendPaperQuestions[`${i}_title`] = ques.title;
                  ques.questionOpts.forEach((opt, j) => {
                    flattendPaperQuestions[`${i}_${j}_label`] = opt.label;
                    flattendPaperQuestions[`${i}_${j}_picurl`] = opt.picUrl;
                  });
                });
                this.flattendPaperQuestions = flattendPaperQuestions;

                let formRule1 = {};
                paperQuestions.forEach((ques, i) => {
                  formRule1[`${i}_title`] = [
                    { required: true, message: "请完成题干设置！" },
                  ];
                  ques.questionOpts.forEach((opt, j) => {
                    formRule1[`${i}_${j}_label`] = [
                      { required: true, message: "请完成选项设置！" },
                    ];
                  });
                });
                this.formRule1 = formRule1;

                this.editItem.isGenerated = true;
              } else {
                this.remoteValidatePaperName = "问卷【xx】已经存在！";

                (this.$refs.createForm as any).validate(() => {});

                throw new Error("remote validate failed");
              }
            })
            .catch(() => {});
          // .then(() => {
          //   /**
          //    * TODO: 绑接口
          //    * J1.4问卷详情
          //    *  情景1：初次生成问卷
          //    *  情景2：编辑已经生成的问卷
          //    */

          //   if ('success' == 'success') {
          //     const paperQuestions = Object.keys([...(new Array(4))]).map(i => {
          //       let paperQuestion = new ClassPaperQuestion();
          //       const randomZhibiao = this.paperZhibiaoOpts[Math.floor(Math.random() * 5)]
          //       paperQuestion.title = 'alsdkjfka;sdljf'
          //       paperQuestion.zhibiaoId = randomZhibiao.value
          //       paperQuestion.zhibiaoTitle = randomZhibiao.label
          //       paperQuestion.questionOpts = Object.keys([...(new Array(4))]).map(j => {
          //         let questionOpt = new ClassPaperQuestionOpt()
          //         questionOpt.value = '00000000-0000-0000-0000-000000000000'
          //         questionOpt.label = 'A. 优秀'
          //         questionOpt.picUrl = '/img/badges/zhuang3.png'
          //         return questionOpt
          //       })

          //       return paperQuestion
          //     })

          //     /** mark question._inx & option._inx */
          //     paperQuestions.forEach((it,i) => {
          //       it._inx = i
          //       it._prevInx = -1
          //       it.questionOpts.forEach((opt, j) => {
          //         opt._inx = j
          //       })
          //     })
          //     this.$set(this.editItem, 'paperQuestions', paperQuestions)

          //     let flattendPaperQuestions = {}
          //     paperQuestions.forEach((ques, i) => {
          //       flattendPaperQuestions[`${i}_title`] = ques.title
          //       ques.questionOpts.forEach((opt, j) => {
          //         flattendPaperQuestions[`${i}_${j}_label`] = opt.label
          //         flattendPaperQuestions[`${i}_${j}_picurl`] = opt.picUrl
          //       })
          //     })
          //     this.flattendPaperQuestions = flattendPaperQuestions

          //     let formRule1 = {}
          //     paperQuestions.forEach((ques, i) => {
          //       formRule1[`${i}_title`] = [
          //         { required: true, message: '请完成题干设置！'}
          //       ]
          //       ques.questionOpts.forEach((opt, j) => {
          //         formRule1[`${i}_${j}_label`] = [
          //           { required: true, message: '请完成选项设置！'}
          //         ]
          //       })
          //     })
          //     this.formRule1 = formRule1

          //     this.editItem.isGenerated = true
          //   } else {
          //     this.remoteValidatePaperName = '问卷【xx】已经存在！';

          //     (this.$refs.createForm as any).validate(() => {});

          //     throw new Error('remote validate failed')
          //   }
          // })
        }
      });
    }
  }

  togglePreview() {
    this.innerPreview = !this.innerPreview;
  }

  // DONE
  async onHide() {
    this.$emit("on-hide");
  }

  // DONE
  async onShow() {
    this.innerPreview = false;

    if (this.itemId) {
      // ------------------- 编辑
      await ajax
        .post(
          "/api/services/app/QuestionNaireLibrary/Detail?id=" +
            this.itemId +
            "&copy=0",
          {
            params: {},
          }
        )
        .then((resp) => {
          let item = resp.data.result
        
          this.editItem = {
            id: item.questionNaireLibraryId,
            paperName: item.questionNaireName,
            paperType: item.questionGeneratType,
            paperZhibiao: item.quotaId,
            paperXuanxiang: item.selectShowContentType.map(x => '' + x),
            isGenerated:false,
            paperQuestions:item.paperQuestions
          };
          //   this.editItem = resp.data.result.map((item) => ({
          //   id: item.questionNaireLibraryId,
          //   paperName: item.questionNaireName,
          //   paperType: item.questionGeneratType,
          // }))
        console.log( this.editItem.paperXuanxiang)
        console.log( this.editItem.paperQuestions)

        const paperQuestions = item.paperQuestions
        paperQuestions.forEach((it, i) => {
          it._inx = i;
          it._prevInx = -1;
          it.questionOpts.forEach((opt, j) => {
            opt._inx = j;
          });
        });
         this.$set(this.editItem, "paperQuestions", paperQuestions);

        let flattendPaperQuestions = {};
        paperQuestions.forEach((ques, i) => {
          flattendPaperQuestions[`${i}_title`] = ques.title;
          ques.questionOpts.forEach((opt, j) => {
            flattendPaperQuestions[`${i}_${j}_label`] = opt.label;
            flattendPaperQuestions[`${i}_${j}_picurl`] = opt.picUrl;
          });
        });
        this.flattendPaperQuestions = flattendPaperQuestions;

        let formRule1 = {};
        paperQuestions.forEach((ques, i) => {
          formRule1[`${i}_title`] = [
            { required: true, message: "请完成题干设置！" },
          ];
          ques.questionOpts.forEach((opt, j) => {
            formRule1[`${i}_${j}_label`] = [
              { required: true, message: "请完成选项设置！" },
            ];
          });
        });
        this.formRule1 = formRule1;

        this.editItem.isGenerated = true;

        })
        .catch(() => {});
      // .then(() => {
      //   /**
      //    * TODO: 绑接口
      //    * J1.4问卷详情
      //    * === 获取问卷信息
      //    */
      //   Object.assign(this.editItem, {
      //     id: "<itemId>",
      //     paperName: "问卷123",
      //     paperType: "1",
      //     paperZhibiao: [this.paperZhibiaoOpts[0].value],
      //     paperXuanxiang: [this.paperXuanXiangOpts[0].value],
      //   });

      //   this.onGenerate();
      // });
    } else {
      // -------------------------------新建
      Object.assign(this.editItem, new ClassItem());
    }
  }

  remoteValidatePaperName = "";

  // DONE
  formRule = {
    paperName: [
      { required: true, message: "此项是必填项" },
      { validator: this.validatePaperName },
    ],
    paperType: [{ required: true, message: "此项是必填项" }],
    paperZhibiao: [
      { required: true, message: "此项是必填项" },
      { validator: this.validatePaperZhibiao },
    ],
    paperXuanxiang: [
      { required: true, message: "此项是必填项" },
      { validator: this.validatePaperXuanxiang },
    ],
  };

  validatePaperName(rules, value, cb) {
    if (this.remoteValidatePaperName) {
      cb(new Error(this.remoteValidatePaperName));
    } else {
      cb();
    }
  }

  validatePaperZhibiao(rules, value, cb) {
    if (value.length == 0) {
      cb(new Error("此项是必填项"));
    } else {
      cb();
    }
  }

  validatePaperXuanxiang(rules, value, cb) {
    if (value.length == 0) {
      cb(new Error("此项是必填项"));
    } else {
      cb();
    }
  }

  formRule1: any = {};

  flattendPaperQuestions: any = {};

  onPaperFormChange(inx, field) {
    this.$set(
      this.editItem.paperQuestions[inx],
      field,
      this.flattendPaperQuestions[`${inx}_${field}`]
    );
    console.log("---", this.editItem.paperQuestions[inx]);
  }
  onPaperOptionFormChange(questionIndex, optionIndex, field) {
    this.$set(
      this.editItem.paperQuestions[questionIndex].questionOpts[optionIndex],
      field,
      this.flattendPaperQuestions[`${questionIndex}_${optionIndex}_${field}`]
    );
  }
  onInsertQuestion(inx) {
    const prevQuestion = this.editItem.paperQuestions[inx];

    let paperQuestion = new ClassPaperQuestion();
    paperQuestion.title = "";
    paperQuestion.zhibiaoId = prevQuestion.zhibiaoId;
    paperQuestion.zhibiaoTitle = prevQuestion.zhibiaoTitle;
    paperQuestion.questionOpts = Object.keys([...new Array(4)]).map((j) => {
      let questionOpt = new ClassPaperQuestionOpt();
      questionOpt.value = "";
      questionOpt.label = "";
      questionOpt.picUrl = "";
      return questionOpt;
    });
    paperQuestion._inx = this.editItem.paperQuestions.length;
    paperQuestion._prevInx = inx;
    paperQuestion.questionOpts.forEach((opt, j) => {
      opt._inx = j;
    });
    this.editItem.paperQuestions.push(paperQuestion);

    this.flattendPaperQuestions[`${paperQuestion._inx}_title`] =
      paperQuestion.title;
    paperQuestion.questionOpts.forEach((opt, j) => {
      this.flattendPaperQuestions[`${paperQuestion._inx}_${j}_label`] =
        opt.label;
      this.flattendPaperQuestions[`${paperQuestion._inx}_${j}_picurl`] =
        opt.picUrl;
    });
    this.flattendPaperQuestions = JSON.parse(
      JSON.stringify(this.flattendPaperQuestions)
    );

    this.formRule1[`${paperQuestion._inx}_title`] = [
      { required: true, message: "请完成题干设置！" },
    ];
    paperQuestion.questionOpts.forEach((opt, j) => {
      this.formRule1[`${paperQuestion._inx}_${j}_label`] = [
        { required: true, message: "请完成选项设置！" },
      ];
    });

    console.log(
      "----- ",
      inx,
      this.editItem.paperQuestions,
      this.groupedPaperQuestions
    );
  }
  onDeleteQuestion(inx) {
    const nextInx = this.editItem.paperQuestions.findIndex(
      (x) => x._prevInx == inx
    );
    if (nextInx > -1) {
      this.$set(
        this.editItem.paperQuestions[nextInx],
        "_prevInx",
        this.editItem.paperQuestions[inx]._prevInx
      );
    }
    this.$set(this.editItem.paperQuestions[inx], "_filtered", true);

    Object.keys(this.formRule1)
      .filter((k) => k.indexOf(`${inx}_`) == 0)
      .forEach((k) => {
        delete this.formRule1[k];
      });

    console.log(
      "-----",
      inx,
      this.editItem.paperQuestions,
      this.groupedPaperQuestions
    );
  }
  funUploadPicture(questionIndex, optionIndex) {
    return (file) => {
      console.log("file", file);
      let fd = new FormData();
      fd.append("file", file);
      ajax.post("/api/File/UploadSingleFile", fd).then((res) => {
        if (res.data.success) {
          const { filePath, ordinName, md5 } = res.data.result;
          const picUrl = remoteServiceBaseUrl + filePath;
          this.$set(
            this.editItem.paperQuestions[questionIndex].questionOpts[
              optionIndex
            ],
            "picUrl",
            picUrl
          );
          this.$set(
            this.flattendPaperQuestions,
            `${questionIndex}_${optionIndex}_picurl`,
            picUrl
          );
        } else if (res.data.error) {
        }
      });

      return false;
    };
  }
  onRemovePicture(questionIndex, optionIndex) {
    this.$set(
      this.editItem.paperQuestions[questionIndex].questionOpts[optionIndex],
      "picUrl",
      ""
    );
    this.$set(
      this.flattendPaperQuestions,
      `${questionIndex}_${optionIndex}_picurl`,
      ""
    );
  }

  get isCustomizationEnabled() {
    // TODO: 允许自定义
    // return this.editItem.paperXuanxiang.indexOf('3') > -1
    return true;
  }
}
</script>

<style scoped>
.title-dec {
  margin: 15px 20px;
}
.title-dec::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 1em;
  vertical-align: middle;
  background: #2d8cf0;
  margin-right: 5px;
}
.question-opt-dec {
  margin-left: 20px;
}
.question-opt-dec::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 50%;
  vertical-align: middle;
}
/deep/ .ivu-form-item {
  position: relative;
}
/deep/ .ivu-form .ivu-form-item-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.question-option /deep/ .ivu-input[disabled] {
  background: #fff;
  color: #212121;
}
.create-form1 /deep/ .ivu-form-item-required .ivu-form-item-label:before {
  display: none;
}
.v-hide {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: -1;
}
</style>

